<template>
  <div class="lab-list">
    <div class="swiper-container mySwiper" id="lab-list-swiper-hooks">
      <div class="swiper-wrapper" ref="domRef">
        <div class="swiper-slide" v-for="item in labs" :key="item.name">
          <div class="lab-details">
            <div class="icon">
              <img :src="require(`@/assets/labicons/${item.icon}.png`)" />
            </div>
            <div class="name-cn">{{ item.name }}</div>
            <div class="name-en">
              {{
                item.nameEn ||
                'Key Laboratory of Petroleum Geochemistry, CNPC'
              }}
            </div>
            <div class="desc">
              {{
                item.desc ||
                '油气地球化学重点实验室是1999年中国石油天然气股份有限公司成立的首批重点实验室之一，2006年中国石油集团公司批准建设，2012年通过验收，2017年被评为集团公司优秀重点实验室。'
              }}
            </div>
            <div class="dashboard">
              <div class="dashboard-item">
                <div class="dashboard-item-name">科研项目</div>
                <div class="dashboard-item-value">86</div>
              </div>
              <div class="dashboard-item">
                <div class="dashboard-item-name">出版专著</div>
                <div class="dashboard-item-value">12</div>
              </div>
              <div class="dashboard-item">
                <div class="dashboard-item-name">发表论文</div>
                <div class="dashboard-item-value">420</div>
              </div>
              <div class="dashboard-item">
                <div class="dashboard-item-name">国家发明专利</div>
                <div class="dashboard-item-value">42</div>
              </div>
              <div class="dashboard-item">
                <div class="dashboard-item-name">软件著作权</div>
                <div class="dashboard-item-value">11</div>
              </div>
              <div class="dashboard-item">
                <div class="dashboard-item-name">行业标准</div>
                <div class="dashboard-item-value">12</div>
              </div>
            </div>
            <div class="lab-btn">
              <ButtonView size="lg">查看详情</ButtonView>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="lab-swiper-wrapper_arrow prev" id="lab-swiper-prev-hooks"></div>
    <div class="lab-swiper-wrapper_arrow next" id="lab-swiper-next-hooks"></div>
  </div>
</template>

<script setup>
import { ref, onMounted,  } from 'vue'//watch
// import { chunk, take, takeRight } from 'lodash'
import ButtonView from '@/components/ButtonView.vue'
import {isArray} from 'lodash'
import Swiper from 'swiper/bundle'
import 'swiper/css/bundle'
// import IButton from '@/components/button/ButtonIndex.vue'
// import LabListSwiper from './LabListSwiper'
import 'swiper/css/bundle'

const swiperRef = ref()
const domRef = ref()

// const activeIdRef = ref(10)

const labs = ref([
  { id: 1, icon: '3', name: '国家级', root: true },
  {
    id: 2,
    icon: '国家能源页岩气研发(实验)中心',
    name: ['国家能源', '页岩气研发(实验)中心'],
  },
  { id: 3, icon: '三次采油重点实验室', name: ['三次采油', '重点实验室'] },
  { id: 4, icon: '稠油开采重点实验室', name: ['稠油开采', '重点实验室'] },
  {
    id: 5,
    icon: '国家能源致密油气研发中心',
    name: ['国家能源', '致密油气研发中心'],
  },
  {
    id: 6,
    icon: '提高石油采收率国家重点实验室',
    name: ['提高石油采收率', '国家重点实验室'],
  },
  { id: 7, icon: '采油采气重点实验室', name: ['采油采气', '重点实验室'] },
  { id: 8, icon: '油田化学重点实验室', name: ['油田化学', '重点实验室'] },
  { id: 9, icon: '19', name: '公司级', root: true },
  {
    id: 10,
    icon: '油气地球化学重点实验室',
    name: ['油气地球化学', '重点实验室'],
  },
  { id: 11, icon: '纳米化学重点实验室', name: ['纳米化学', '重点实验室'] },
  { id: 12, icon: '油气藏改造重点实验室', name: ['油气藏改造', '重点实验室'] },
  { id: 13, icon: '油气储层重点实验室', name: ['油气储层', '重点实验室'] },
  {
    id: 14,
    icon: '盆地构造与油气成藏重点实验室',
    name: ['盆地构造与油气成藏', '重点实验室'],
  },
  { id: 15, icon: '非常规油气重点实验室', name: ['非常规油气', '重点实验室'] },
  {
    id: 16,
    icon: '油气地下储库工程重点实验室',
    name: ['油气地下储库工程', '重点实验室'],
  },
  {
    id: 17,
    icon: '碳酸盐岩储层重点实验室',
    name: ['碳酸盐岩储层', '重点实验室'],
  },
  { id: 18, icon: '地球物理重点实验室', name: ['地球物理', '重点实验室'] },
  { id: 19, icon: '物联网重点实验室', name: ['物联网', '重点实验室'] },
  {
    id: 20,
    icon: '二氧化碳捕集、利用与封存重点实验室',
    name: ['二氧化碳捕集、利用与封存', '重点实验室'],
  },
  { id: 21, icon: '测井重点实验室', name: ['测井', '重点实验室'] },
  {
    id: 22,
    icon: '天然气成藏与开发重点实验室',
    name: ['天然气成藏与开发', '重点实验室'],
  },
  { id: 23, icon: '油藏描述重点实验室', name: ['油藏描述', '重点实验室'] },
  {
    id: 24,
    icon: '油层物理与渗流力学重点实验室',
    name: ['油层物理与渗流力学', '重点实验室'],
  },
].map(item => ({...item, name: isArray(item.name) ? item.name.join('') : item.name})))

onMounted(() => {
  swiperRef.value = new Swiper('#lab-list-swiper-hooks', {
    loop: true,
    slidesPerView: 1, //add(how many slides to show)
    centeredSlides: true,
    spaceBetween: 0,
    // autoplay: {
    //   delay: 5000,
    // },
    speed: 1200,
    // effect: 'coverflow',
    // coverflowEffect: {
    //   rotate: 0, // 倾斜角度
    //   stretch: -20,//92, // 重叠的距离
    //   depth: 200, // 位置深度（值越大z轴越远，看起来越小）
    //   modifier: 1, // 倍率（值越大，上面三个参数效果越明显）
    //   slideShadows: false, // 左右是否有阴影遮罩
    // },
    navigation: {
      nextEl: '#lab-swiper-next-hooks',
      prevEl: '#lab-swiper-prev-hooks',
    },
  })

  // swiperRef.value.on('transitionStart', () => {
  //   // const { realIndex } = swiperRef.value

  //   // activeIndexRef.value = realIndex
  // })
})
</script>

<style scoped lang="scss">
.lab-list{
  position: relative;
  margin-top: dpi(8rem);
  .swiper-container{
    width: dpi(70rem);
    height: dpi(86rem);
    margin: 0 auto;
    overflow: hidden;
    .swiper-slide{
      position: relative;
      &::after{
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color: #000000;
        box-shadow: 0rem 0rem 5rem 0rem rgba(0, 0, 0, 0.4);
        opacity: 0.4;
        z-index: -1;
        content: '';
      }
      .lab-details{
        width: 100%;
        // background: red;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .icon{
          width: dpi(12rem);
          height: dpi(7rem);
          margin-top: dpi(7rem);
          margin-bottom: dpi(4rem);
          text-align: center;
          > img{
            height: 100%;
          }
        }
        .name-cn{
          font-family: FZLTTHK--GBK1-0;
          font-size: dpi(2rem);
          line-height: dpi(5rem);
          color: #ffffff;
        }
        .name-en{
          margin-bottom: dpi(4rem);
          font-family: PingFangSC-Regular;
          font-size: dpi(1rem);
          color: #91caff;
        }
        > .desc{
          padding: 0 dpi(12rem);
          line-height: dpi(3rem);
          color: #ffffff;
          font-family: PingFangSC-Regular;
          font-size: dpi(2rem);
          line-height: dpi(3rem);
          color: #ffffff;
        }
        .lab-btn{
          margin-top: dpi(4rem);
        }
        .dashboard{
          width: 76%;
          display: grid;
          grid-template-rows: repeat(2, 1fr);
          grid-template-columns: repeat(3, 1fr);
          margin-top: dpi(2.6rem);
          color: #fff;
          .dashboard-item{
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            height: dpi(13rem);
            .dashboard-item-name{
              margin-bottom: dpi(2rem);
              font-family: PingFangSC-Regular;
              font-size: dpi(2rem);
              line-height: dpi(4rem);
              color: #289dc6;
            }
            .dashboard-item-value{
              font-family: NexaHeavy;
              font-size: dpi(4rem);
              font-weight: normal;
              font-stretch: normal;
              line-height: dpi(3rem);
              color: #ffffff;
            }
          }
        }
      }
    }
  }
  .lab-swiper-wrapper_arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    width: dpi(10rem);
    height: dpi(19rem);
    margin-top: dpi(-9.5rem);
    background-color: rgb(5, 113, 176, .4);
    border: solid 0rem #000000;
    cursor: pointer;
    font-family: swiper-icons;
    font-size: dpi(3.6rem);
    color: #ffffff;
    z-index: 10;
    &.next{
      right: 0;
      &::after{
        content: 'next';
      }
    }
    &.prev {
      left: 0;
      &::after{
        content: 'prev';
      }
    }
  }
}
</style>